<template>
    <div>
        <div class="header">
            居民管理
        </div>
        <!-- 查询 -->
        <div class="top">
            <el-form ref="form" :model="form" label-width="80px" class="form">
                <el-form-item label="楼栋ID：">
                    <el-cascader v-model="query.buildingid" :options="buildata" :props="propstag" clearable
                        style="width:150px;">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="query.name" placeholder="居民姓名"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="query.mobile" placeholder="居民电话" style="width:150px;"></el-input>
                </el-form-item>
                <el-form-item label="房间号">
                    <el-input v-model="query.houseno" placeholder="房间号"></el-input>
                </el-form-item>
                <el-form-item label="用户类型">
                    <el-select v-model="query.usertype" placeholder="请选择" style="width:150px;">
                        <el-option v-for="(item,index) in type" :key="index" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" style="width:100px;height:40px;margin-left: 50px;" @click="onSubmit">查询
                </el-button>
            </el-form>
        </div>
        <!-- 添加/批量删除/批量审核 -->
        <div style="padding:0 30px">
            <el-button type="primary" style="width:100px;" @click="dialogVisible=true">添加</el-button>
            <el-button type="danger" @click="dels()">批量删除</el-button>
            <el-button type="success">批量审核</el-button>
        </div>
        <!-- 列表 -->
        <div style="padding:20px">
            <Table :tableCols="tableCols" :tableData="tableData" :total="total" :selection="selection"
                @pagechange="pagechange" @selsChange="selsChange">
                <template #photo="{row}" style="width: 45px;">
                    <div v-if="row.photo!=''">
                        <el-image :src='IMGURL+row.photo' style="width: 45px; height: 45px" fit="contain">
                        </el-image>
                    </div>
                    <div v-else>
                        暂无图片
                    </div>
                </template>
                <template #sex="{ row }">
                    <span v-if="row.sex != 0">男</span>
                    <span v-else>女</span>
                    <span></span>
                </template>
                <template #option="{ row }">
                    <el-button type="success" size="mini" @click="handleClick(row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="del(row.id)">删除
                    </el-button>
                </template>
            </Table>
        </div>
        <!-- 添加 -->
        <Add :dialogVisible="dialogVisible" :handleClickdata="handleClickdata" @isclose="isclose"></Add>
    </div>
</template>

<script>
import Table from '@/components/Table/Table.vue'
import Add from '@/components/add/adduserinfo.vue'
import { userlist, builList, usertype, Del, Dels } from '@/api/userinfo'
// 图片路径
import { IMGURL } from "@/api/config"
export default {
    components: {
        Table,
        Add
    },
    data() {
        return {
            dialogVisible: false,
            IMGURL: IMGURL,
            selection: true,
            form: {
                name: "",
                region: ""
            },
            query: {
                page: 1,
                psize: 5,
                key: ""
            },
            propstag: {
                value: 'id',
                label: 'name',
                children: 'children',
                checkStrictly: true,
                emitPath: false
            },
            tableCols: [
                {
                    prop: "id",
                    lable: "ID",
                    width: "80px"
                },
                {
                    coltype: "photo",
                    slotname: "photo",
                    lable: "头像",

                },
                {
                    prop: "name",
                    lable: "姓名",
                    width: "100px"
                },
                {
                    prop: "usertypeName",
                    lable: "业主类型",
                    width: "80px"
                },
                {
                    lable: "性别",
                    coltype: "sex",
                    slotname: "sex",

                },
                {
                    lable: "身份证号",
                    prop: "cardid"
                },
                {
                    prop: "mobile",
                    lable: "手机号"
                },
                {
                    prop: "usernative",
                    lable: "籍贯"
                },
                {
                    prop: "nation",
                    lable: "民族",
                    width: "50px"
                },
                {
                    prop: "building",
                    lable: "小区"
                },
                {
                    prop: "houseno",
                    lable: "房间号"
                },
                {
                    prop: "stateName",
                    lable: "审核状态"
                },

                {
                    lable: "操作",
                    coltype: "option",
                    slotname: "option"
                },
            ],
            tableData: [],
            ids: [],
            total: 0,
            buildata: [],
            type: [],
            srcList: [

            ],
            handleClickdata: {}
        }
    },
    created() {
        // 居民列表
        this.getuserlist(),
            // 楼栋
            this.getbuilList()
        // 居民类型
        this.getusertype()
    },
    methods: {
        async getuserlist() {
            let res = await userlist(this.query)
            console.log(res);
            if (res.errCode == 10000) {
                // res.data.list.map(item => {
                //     item.srclist = item.photo.map(val => { return this.IMGURL + val.url })
                // })
                this.srcList = res.data.list.map(val => {
                    return this.IMGURL + val.photo
                })
                this.tableData = res.data.list
                this.total = res.data.counts
            }
        },

        // 居民类型
        async getusertype() {
            let res = await usertype()
            if (res.errCode == 10000) {
                this.type = res.data.list
            }
        },
        // 楼栋id
        async getbuilList() {
            let res = await builList()
            if (res.errCode == 10000) {
                this.buildata = res.data.list
            }
        },
        // 单删
        async del(id) {
            let res = await Del({ id: id })
            if (res.errCode == 10000) {
                this.$message.success("删除成功")
                this.getuserlist()
            }
        },
        // 修改
        handleClick(data) {
            this.handleClickdata = JSON.parse(JSON.stringify(data))
            this.dialogVisible = true
        },
        // 批量删除
        selsChange(pageconfig) {
            this.ids = pageconfig;
            console.log(this.ids);
        },
        dels() {
            // 删除前的提示
            this.$confirm("确认删除记录吗?", "提示", {
                type: "warning",
            }).then(async () => {
                let res = await Dels({ ids: this.ids })
                console.log(res);
                if (res.errCode == 10000) {
                    this.$message.success("删除成功")
                    this.getuserlist()
                }
            });
        },

        // 数据的刷新
        isclose(val, isrefresh = false, editdata = {}) {
            this.dialogVisible = val
            this.handleClickdata = editdata
            if (isrefresh) {
                this.getuserlist()
            }
        },
        onSubmit() {
            this.getuserlist()
        },
        pagechange(val) {
            this.query = val
            this.getuserlist()
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    color: #427ff4;
    font-size: 16px;
}

.form {
    display: flex;
    padding: 0 30px;
}

.form .el-input {
    width: 130px;
}
</style>